<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1><a href="http://blog.jobbole.com/52430/" target="_blank">DOM事件简介</a></h1>
<p>理解DOM事件是如何工作，才能更好的驾驭它</p>

<p>在javscript中，为元素添加事件监听
    <strong> element.addEventListener("event-name","callback","use-capture")</strong><br/>
    <span>event-name(string) <em>click mousedown touchstart</em>;</span>
    <span>callback(function)（回调函数）;</span>
    <span>use-capture(boolean) <em> 决定了回调函数(callback)是否在“捕获(capture)”阶段被触发。</em> </span>
</p>
<button id="addBtn">add Btn</button>

<p>
    移除监听 <strong> element.removeEventListener("event-name","callback","use-capture") ,你必须有这个被绑定的回调函数的引用</strong> <br/>
    <span>
        考虑移除事件监听的话，就需要保留回调函数的句柄。意思就是不能使用匿名函数作为回调函数。
    </span>
</p>
<button id="removeBtn">remove Btn</button>

<p>
    维护回调函数上下文: <br/>
    1、使用匿名函数内部调用方法，从而获得正确的函数执行上下文
    2、使用Function.prototype.bind,来生成一个新的函数（被绑定过的函数），这个函数会在指定的上下文中被执行，然后我们将这个绑定过的函数作为参数传递给addEventListener()的回调函数
</p>

<button id="context">callback context</button>

<script src="dom.js"></script>
</body>
</html>